import { useState, useImperativeHandle } from 'react'
import { Modal, Form, Input, message, Select } from 'antd'
import { TypeDeptListAPI, TypeAddRoleAPI, TypeEditRoleAPI, listItemTYPE } from '../../type/api'
import { addRoleListAPI, editRoleListAPI } from '../../api/roleListApi'
interface Props {
  //父组件给的ref，我自子组件通过这个ref给父组件暴露方法
  mref: React.MutableRefObject<
    | {
        showModal: (type: string, data?: listItemTYPE) => void
      }
    | undefined
  >
  //父组件给的获取角色列表的方法
  getRoleListFn: () => void
}

function CreateRole(props: Props) {
  //存储父组件传来的添加编辑状态
  const [type, setType] = useState<string>('create')

  //获取表单实例
  const [form] = Form.useForm()
  //控制组件显示隐藏的状态
  const [isModalOpen, setIsModalOpen] = useState(false)
  //控制组件显示隐藏的方法(同时也暴露给父组件)
  const showModal = (type: string, data?: listItemTYPE) => {
    resetForm()
    setIsModalOpen(true)

    if (data) {
      setType('edit')
      //这里通过给Form的Item设置初始值，就是表单value赋值，从而表单自动根据value显示label的值渲染
      form.setFieldsValue(
        // record.parentId, record.deptName, record.userName,_id
        data
      )
    }
  }
  //暴露给父组件的方法
  useImperativeHandle(props.mref, () => {
    return {
      // ... 你的方法 ...
      showModal
    }
  })
  // 控制组件提交方法
  const handleOk = async () => {
    const isOk = await form.validateFields()
    if (!isOk) {
      return
    }
    setIsModalOpen(false)
    if (type === 'create') {
      onFinish()
      message.success('添加成功')
    }
    if (type === 'edit') {
      await editRoleListAPI(form.getFieldsValue(true))
      message.success('编辑成功')
    }
    //调用父组件的获取角色列表的方法
    props.getRoleListFn
  }

  //重置表单的方法
  function resetForm() {
    form.resetFields()
  }

  // 控制组件显示隐藏的方法
  const handleCancel = () => {
    setIsModalOpen(false)
  }

  //表单提交的方法
  function onFinish() {
    //获取表单数据
    const obj = form.getFieldsValue(true)

    addRoleListFn(obj)
  }

  //添加角色的方法
  async function addRoleListFn(obj: TypeAddRoleAPI) {
    await addRoleListAPI(obj)
  }
  //获取所有用户信息的方法

  return (
    <>
      <Modal title='添加角色' open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name='basic'
          form={form}
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          onFinish={onFinish}
        >
          <Form.Item name='_id' hidden>
            <Input></Input>
          </Form.Item>
          <Form.Item
            hasFeedback
            rules={[{ required: true, message: '必选项' }]}
            name='roleName'
            label='角色名称'
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            hasFeedback
            rules={[{ required: true, message: '必选项' }]}
            name='deptName'
            label='添加备注信息'
          >
            <Input></Input>
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

export default CreateRole
